<template>
    <div class="box">
        <h3>sass动态样式集成</h3>
        <ol>
            <li>vue模块化项目必须安装sass动态语言编译包：npm install sass --save-dev|-D
                <img src="@/index/assets/29.png" alt="" srcset="">
            </li>
            <li>vue模块化项目必须提供对应的加载功能：npm install sass-loader --save-dev|-D
                <img src="@/index/assets/28.png" alt="" srcset="">
            </li>
            <li>安装完成后.sass文件定义的sass样式就可以直接和.css文件在vue环境中的使用方式一致</li>
            <li>.vue的style标签如果需要使用，必须定义 lang="sass|scss" 的语言描述代码</li>
        </ol>
        <img src="@/index/assets/27.png" alt="" srcset="">
        <h3>sass的全局样式加载</h3>
        <ol>
            <li>动态样式的变量定义，在编译后是不存在的</li>
            <li>以vue模块化语法的知识在main.js(引导文件)中加载的全局动态样式变量文件是优先编译，所以变量不会保存</li>
            <li>所以动态样式语言的全局变量无法在main.js文件中被引导，必须通过特定的环境变化实现</li>
            <li>安装全局样式资源加载模块，并完成配置
                <img src="@/index/assets/30.png" alt="" srcset="">
            </li>
        </ol>
        <div class="test-box">
            <span>测试sass样式</span>
            <strong>测试css变量</strong>
        </div>
        <SassChild></SassChild>
    </div>
</template>

<script>
import SassChild from "./components/SassChild.vue";
export default {
    components: {
        SassChild,
    },
}
</script>

<style scoped lang="scss">
// $fontColor:#660000;
.test-box{
    border: 1px solid black;
    span{
        color: $fontColor;
        &:hover{
            color: lighten($fontColor, 50%);
        }
    }
    strong{
        color: var(--fc);
    }
}
</style>